import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {AtIcon} from "taro-ui";
import {View, Image, ScrollView, Navigator, Text} from '@tarojs/components';
import {gotoPage} from "../../../../utils/tools";
import Float from '../../../../components/float/float';
import {TARO_ENV} from "../../../../constants/api";
import './index.scss';

interface IProps {
  data: any
  isUser: any
}

export default class ShangxinToday extends Component<IProps> {

  render() {
    let {data}: any = this.props;
    data = data || {};
    data.color = data.color || "#fff";
    const dataColor = Taro.getStorageSync('colorData');
    return (
      <View className={`seckill ${TARO_ENV + 'seckill'}`} style='background-color: #fff'>
        <View className={`seckill-title ${TARO_ENV + 'seckill-title'}`} style={`background: linear-gradient(-180deg, ${data.color}, #fff);`}>
          <View className='seckill-title-left'>
            <Image src={data.titleIcon} className='imageStyle' />
            { data.name }
          </View>
          <View className='ret' onClick={() => gotoPage(data.moreUrl)}>
            更多
            <AtIcon value='chevron-right' size='16' color='#666' customStyle='line-height: inherit;' />
          </View>
        </View>
        <ScrollView enable-flex scrollX className='scroll-view'>
          <View className='seckill-block'>
            {
              data && data.data && data.data.map((item, index) => (
                <View className={index == 0? 'm-l-0 seckill-block-item': 'seckill-block-item'} key={index}>
                  <Navigator key={item.id} className='scroll-item' url={item.url}>
                    <View className='seckill-block-item-image'>
                      <Image src={item.main_img || item.img} className='img' mode='aspectFill' />
                    </View>
                    <View className='seckill-block-item-title' style='-webkit-box-orient: vertical;'>
                      {item.name}
                    </View>
                    <View className='seckill-block-item-detail' style='-webkit-box-orient: vertical;'>
                     {item.sub_title}
                    </View>
                    {!process.env.DISTINGUISH_IDENTITY && <View className='seckill-block-item-bottom-lx seckill-block-item-bottom'>
                      <View className='seckill-block-item-bottom-left'>
                        <View className='seckill-block-item-bottom-left-wrapper'>
                          <View className='seckill-block-item-bottom-left-wrapper-bottom-origin-price' style={` color: ${dataColor.originalPriceColor};`}>￥{item.market_price || 0}</View>
                        </View>
                      </View>
                      <View className='seckill-block-item-bottom-right'>
                        <View className='seckill-block-item-bottom-left-wrapper-top' style={` color: ${dataColor.priceColor};`}><Text className='seckill-block-item-bottom-left-wrapper-top-symbol'>￥</Text><Float
                          value={item.price || 0}
                        /></View>
                      </View>
                    </View>}
                    {process.env.DISTINGUISH_IDENTITY && <View className='seckill-block-item-bottom'>
                      <View className='seckill-block-item-bottom-left'>
                        <View className='seckill-block-item-bottom-left-wrapper'>
                          <View className='seckill-block-item-bottom-left-wrapper-top' style={` color: ${dataColor.priceColor};`}><Text className='seckill-block-item-bottom-left-wrapper-top-symbol'>￥</Text><Float
                            value={item.price || 0}
                          /></View>
                          <View className='seckill-block-item-bottom-left-wrapper-bottom-origin-price' style={` color: ${dataColor.originalPriceColor};`}>￥{item.market_price || 0}</View>
                        </View>
                      </View>
                      <View className='seckill-block-item-bottom-right'>
                        <Text className='seckill-block-item-bottom-right-text'>赚</Text>
                        <Text className='seckill-block-item-bottom-right-text-symbol'>￥</Text>
                        <Float
                          value={item.commission || 0}
                        />
                      </View>
                    </View>}
                  </Navigator>
                </View>
              ))
            }
          </View>
        </ScrollView>
      </View>
    )
  }
}
